<template>
  <div>
    <!-- style="margin-top:-60px" -->
    <ng-form-design ref="formDesign" :config="formConfig">
      <template slot="formName">
        <span> ng-form-element 示例 </span>
      </template></ng-form-design
    >
    <el-button type="success" size="mini" round @click="saveData"
      >保存</el-button
    >
  </div>
</template>

<script>
export default {
  data () {
    return {
      isEdit: this.$route.query.isEdit,
      ngData: JSON.parse(localStorage.getItem('ngData')) || [],
      formConfig: {
        hideRequiredMark: true,
        httpConfig: (config) => {
          config.headers.aaaa = 'bbbb'
          return config
        }
      },
      modelData: {},
      template: {},
      show: false
    }
  },
  created () {
    if (this.isEdit === 'true') {
      this.getData()
    }
  },
  methods: {
    saveData () {
      const data = this.$refs.formDesign.getModel()

      if (this.isEdit === 'true') {
        const idx = this.ngData.findIndex(
          (item) => String(item.frontId) === String(this.$route.query.frontId)
        )
        this.ngData[idx].data = data
      } else {
        const flag = {
          frontId: Math.random(),
          data: data,
          time: new Date()
        }
        this.ngData.push(flag)
      }

      localStorage.setItem('ngData', JSON.stringify(this.ngData))
      this.$message.success('保存成功')
      this.$router.push('LowCodeForm')
    },
    getData () {
      console.log('执行')
      const data = this.ngData.filter(
        (item) => String(item.frontId) === String(this.$route.query.frontId)
      )
      this.$nextTick((_) => {
        console.log(this.$refs.formDesign)

        this.$refs.formDesign.initModel(data[0].data)
        console.log(data[0].data)
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .panel-header-index {
  visibility: hidden !important;
}
</style>
